<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>大美丽江旅游网</title>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <link rel="stylesheet" type="text/css" href="assets/public.css"/>
    <script src="./js/jquery-3.5.1.js"></script>
    <script src="./js/slider.js"></script>
</head>
<body>
<!--header-->
<div class="header-block">
    <div class="header-box flex-row flex-align-center flex-justify-between">
        <div id="logo" class="header-logo flex-row flex-align-center">
            <img src="assets/images/logo.png" alt="logo">
        </div>
        <!-- 锚点定位tab -->
        <ul class="header-tab flex-row flex-align-center flex-justify-between">
            <li id="item_1" class="tabs-item_1">出行指南</li>
            <li id="item_2" class="tabs-item_2">热门推荐</li>
            <li id="item_3" class="tabs-item_3">人文丽江</li>
            <li id="item_4" class="tabs-item_4">地方资讯</li>
            <li id="item_5" class="tabs-item_5">丽江概况</li>
        </ul>
    </div>
    <!--轮播图-->
    <div class="slider-box">
        <div class="slider-item"></div>
    </div>
</div>
<!-- 出行指南 -->
<div class="guide-box flex-col flex-align-center">
    <ul class="guide-title flex-col flex-align-center">
        <li class="guide-title-en">GUIDE</li>
        <li class="guide-title-zh">出行指南</li>
    </ul>
    <div class="flex-row flex-align-center flex-justify-between flex-wrap">
        <ul class="guide-item flex-row flex-align-center pointer">
            <li class="guide-icon">
                <img src="assets/images/jdgl.png" alt="img">
            </li>
            <li class="guide-desc flex-col">
                <span class="guide-desc-title">景点攻略</span>
                <span class="guide-desc-info">景点信息全掌握,出行最全最新攻略查询</span>
            </li>
        </ul>
        <ul class="guide-item flex-row flex-align-center pointer">
            <li class="guide-icon">
                <img src="assets/images/yylj.png" alt="img">
            </li>
            <li class="guide-desc flex-col">
                <span class="guide-desc-title">节日人文</span>
                <span class="guide-desc-info">当地节日人文,一应具全的信息全掌握,帮你快速领略人文风情</span>
            </li>
        </ul>
        <ul class="guide-item flex-row flex-align-center pointer">
            <li class="guide-icon">
                <img src="assets/images/tsms.png" alt="img">
            </li>
            <li class="guide-desc flex-col">
                <span class="guide-desc-title">特色美食</span>
                <span class="guide-desc-info">著名特色小吃介绍,让你快速感受你最爱的丽江味道</span>
            </li>
        </ul>
        <ul class="guide-item flex-row flex-align-center pointer">
            <li class="guide-icon">
                <img src="assets/images/ddwh.png" alt="img">
            </li>
            <li class="guide-desc flex-col">
                <span class="guide-desc-title">当地文化</span>
                <span class="guide-desc-info">纳西人民不一样的风情,带给你丽江更多彩的文化之旅</span>
            </li>
        </ul>
        <ul class="guide-item flex-row flex-align-center pointer">
            <li class="guide-icon">
                <img src="assets/images/yylj.png" alt="img">
            </li>
            <li class="guide-desc flex-col">
                <span class="guide-desc-title">夜游丽江</span>
                <span class="guide-desc-info">不可错过的丽江打卡盛景,丽江的夜让你流连忘返</span>
            </li>
        </ul>
        <ul class="guide-item flex-row flex-align-center pointer">
            <li class="guide-icon">
                <img src="assets/images/tsxl.png" alt="img">
            </li>
            <li class="guide-desc flex-col">
                <span class="guide-desc-title">特色路线</span>
                <span class="guide-desc-info">大美的自然和古老的东巴文化让你领略丽江真正的美</span>
            </li>
        </ul>
        <ul class="guide-item flex-row flex-align-center pointer">
            <li class="guide-icon">
                <img src="assets/images/zsjd.png" alt="img">
            </li>
            <li class="guide-desc flex-col">
                <span class="guide-desc-title">住宿/酒店</span>
                <span class="guide-desc-info">优雅的现代化风格与古老的青砖白瓦的完美碰撞,不一样的住宿体验</span>
            </li>
        </ul>
        <ul class="guide-item flex-row flex-align-center pointer">
            <li class="guide-icon">
                <img src="assets/images/cxjt.png" alt="img">
            </li>
            <li class="guide-desc flex-col">
                <span class="guide-desc-title">出行交通</span>
                <span class="guide-desc-info">发达的路空交通线,让你无忧快速畅玩丽江到全国各地</span>
            </li>
        </ul>
    </div>
</div>
<!-- 热门推荐 -->
<div class="hot-box flex-col flex-align-center">
    <ul class="guide-title flex-col flex-align-center">
        <li class="guide-title-en">HOTSPOT</li>
        <li class="guide-title-zh">热门推荐</li>
    </ul>
    <ul class="hot-box-item-1">
        <li class="hot-box-li-1">
            <img class="hot-img-1" src="./assets/images/gcjd.jpg" alt="img"/>
            <div class="hot-tags-1 flex-col">
                <span style="margin-bottom: 8px">丽江古城</span>
                <span>Old Town of Lijiang</span>
            </div>
        </li>
        <li class="hot-box-li-2 flex-row flex-align-center flex-justify-between">
            <div class="hot-item-row-1">
                <img class="hot-item-img-1" src="./assets/images/mstc.png" alt="img"/>
                <div class="hot-item-tags-1 flex-col">
                    <span style="margin-bottom: 8px">丽江石头村</span>
                    <span>Shitou village, Lijiang</span>
                </div>
            </div>
            <div class="hot-item-row-1">
                <img class="hot-item-img-1" src="./assets/images/mdsc.png" alt="img"/>
                <div class="hot-item-tags-1 flex-col">
                    <span style="margin-bottom: 8px">丽江大水车</span>
                    <span>Big waterwheel</span>
                </div>
            </div>
            <div class="hot-item-row-1">
                <img class="hot-item-img-1" src="./assets/images/mhlt.png" alt="img"/>
                <div class="hot-item-tags-1 flex-col">
                    <span style="margin-bottom: 8px">丽江黑龙潭</span>
                    <span>Heilong Pond</span>
                </div>
            </div>
        </li>
        <li class="hot-box-li-3 flex-row flex-align-center flex-justify-between">
            <div class="hot-item-sec-1">
                <img class="hot-item-sec-img-1" src="./assets/images/mlyg.png" alt="img"/>
                <div class="hot-item-sec-tags-1 flex-col">
                    <span style="margin-bottom: 8px">蓝月谷</span>
                    <span>Lan Yue Gu</span>
                </div>
            </div>
            <div class="hot-item-sec-1">
                <img class="hot-item-sec-img-1" src="./assets/images/mylxs.png" alt="img"/>
                <div class="hot-item-sec-tags-1 flex-col">
                    <span style="margin-bottom: 8px">玉龙雪山</span>
                    <span>Jade Dragon Snow Mountain</span>
                </div>
            </div>
        </li>
    </ul>
</div>
<!-- 人文丽江 -->
<div class="moods-box flex-col flex-align-center">
    <ul class="guide-title flex-col flex-align-center">
        <li class="guide-title-en">POPULARITY</li>
        <li class="guide-title-zh">人文丽江</li>
    </ul>
    <ul class="foods-box">
        <li class="foods-item-1">
            <img src="./assets/images/fsxyh.jpg" alt="img"/>
        </li>
        <li class="foods-item-title">
            <div class="foods-title flex-col">
                <span class="foods-title-text">特色美食</span>
                <span class="foods-title-en">Specialties Food</span>
            </div>
        </li>
        <li class="foods-item-2">
            <div class="foods-item-2-title">【水性杨花】-海菜花</div>
            <span class="foods-item-2-des">提到“水性杨花”，去过丽江的人都应该知道。这可是在丽江古城以及泸沽湖无人不知、无人不晓的一道名菜。
                “水性杨花”算是诨名，其真名叫海菜花，茎和叶长期生长在水面以下，白色的小花则漂浮在水面上。因为总是随着水波四处荡漾，
                才有了“水性杨花”这个绰号。</span>
        </li>
        <li class="foods-item-3 flex-row flex-align-center flex-justify-between flex-wrap">
            <div class="foods-img-box flex-col flex-align-center">
                <img src="assets/images/ljlpg.jpg" alt="foods"/>
                <span>丽江腊排骨</span>
            </div>
            <div class="foods-img-box flex-col flex-align-center">
                <img src="assets/images/qgj.jpg" alt="foods"/>
                <span>特色汽锅鸡</span>
            </div>
            <div class="foods-img-box flex-col flex-align-center">
                <img src="assets/images/ljlf.jpg" alt="foods"/>
                <span>黑豌豆凉粉</span>
            </div>
            <div class="foods-img-box flex-col flex-align-center">
                <img src="assets/images/ljbb.jpg" alt="foods"/>
                <span>丽江粑粑</span>
            </div>
            <div class="foods-img-box flex-col flex-align-center">
                <img src="assets/images/swy.jpg" alt="foods"/>
                <span>丽江三文鱼</span>
            </div>
            <div class="foods-img-box flex-col flex-align-center">
                <img src="assets/images/nxky.jpg" alt="foods"/>
                <span>纳西烤鱼</span>
            </div>
        </li>
    </ul>
    <ul class="culture-box">
        <li class="culture-item-1">
            <img src="./assets/images/dbwh.png" alt="img"/>
        </li>
        <li class="culture-item-title">
            <div class="culture-title flex-col">
                <span class="culture-title-text">纳西东巴文化</span>
                <span class="culture-title-en">Naxi Dongba</span>
            </div>
        </li>
        <li class="culture-item-2">
            <div class="culture-item-2-title">【纳西族】</div>
            <span class="culture-item-2-des">纳西族是一个古老文明的民族，他们的文字是云南最古老的少数民族象形文字。千多年前，纳西族信奉多神的原始巫教“东巴教”。东巴文化就源于东巴教。 东巴文化包括象形文字
                、东巴经、东巴绘画、东巴音乐舞蹈等，这也是世界上仅存的象形文字。因此，引起了世界各国学者的极大关注与重视。东巴文被誉为“东巴文化的瑰宝”是纳西族在传统宗教东巴教的经书中使用的一种图画文字，
                由东巴（东巴教巫师）用竹尖笔或铜尖笔蘸上用松明烟和酒、胶水、胆汁调制成的墨汁，写在树皮制的厚棉纸上。</span>
        </li>
        <li class="culture-item-3">
            <div class="culture-item-3-title">【东巴文化】</div>
            <span class="culture-item-3-des">东巴文化是纳西族古代文化的重要内容之一，因保存于东巴教而得名，已1000多年的历史，主要包括东巴文字、东巴经、东巴绘画、东巴音乐、东巴舞蹈、东巴法器和各种祭祀仪式等。
云南纳西族东巴文化与西藏象雄雍仲本教文化是同一或同源文化，本教曾在一定历史时期对东巴教产生过深远影响，从民族发展历程看，东巴教与本教息息相关。 首先，二者共同崇拜同一祖师说明了其同一性或同源性，本教的创始人和导
                师是幸饶弥沃如来佛祖敦巴幸饶，东巴教的创始人是东巴什罗，据考证，东巴教徒所崇拜的祖师，就是雍仲本教祖师。</span>
        </li>
    </ul>
</div>
<!--地方资讯-->
<div class="news-box flex-col flex-align-center">
    <ul class="guide-title flex-col flex-align-center">
        <li class="guide-title-en">TOPNEWS</li>
        <li class="guide-title-zh">地方资讯</li>
    </ul>
    <ul class="news-list-box flex-row flex-justify-between">
        <li class="news-list flex-col">
            <div class="news-header flex-row flex-align-center flex-justify-between">
                <span>游记分享</span>
                <a>查看更多~</a>
            </div>
            <div class="news-item flex-row flex-justify-between pointer">
                <span>以丽江大理为圆点玩转云南，你要知道的自由行交通秘籍</span>
                <span class="news-time">2020/12/10 11:32</span>
            </div>
            <div class="news-item flex-row flex-justify-between pointer">
                <span>丽江故地重游，怀念情怀，注视现在</span>
                <span class="news-time">2020/12/01 22:32</span>
            </div>
            <div class="news-item flex-row flex-justify-between pointer">
                <span>行前必看！超详细的云南昆明大理丽江泸沽湖自由行攻略</span>
                <span class="news-time">2020/11/28 19:38</span>
            </div>
            <div class="news-item flex-row flex-justify-between pointer">
                <span>丽江周边景点玩法，享受冬季阳光</span>
                <span class="news-time">2020/11/10 20:12</span>
            </div>
            <div class="news-item flex-row flex-justify-between pointer">
                <span>写在四月，一份丽江开往稻城的自驾摄影攻略</span>
                <span class="news-time">2020/04/02 19:42</span>
            </div>
        </li>
        <li class="news-list flex-col">
            <div class="news-header flex-row flex-align-center flex-justify-between">
                <span>人文资讯</span>
                <a>查看更多~</a>
            </div>
            <div class="news-item flex-row flex-justify-between pointer">
                <span>绝美！浪漫！央视镜头在丽江直击这场视觉盛宴……</span>
                <span class="news-time">2020/12/15 09:38</span>
            </div>
            <div class="news-item flex-row flex-justify-between pointer">
                <span>【丽江全接触】文创体验、纳西文化展示......文博会上精彩多！</span>
                <span class="news-time">2020/12/14 10:42</span>
            </div>
            <div class="news-item flex-row flex-justify-between pointer">
                <span>玉龙雪山景区一天文台获“中国最美星空</span>
                <span class="news-time">2020/12/14 16:32</span>
            </div>
            <div class="news-item flex-row flex-justify-between pointer">
                <span>崔茂虎、郑艺在昆明会见“时代楷模”张桂梅 大力弘扬时代楷模精神 争当新时代最美奋斗者</span>
                <span class="news-time">2020/12/12 20:56</span>
            </div>
            <div class="news-item flex-row flex-justify-between pointer">
                <span>丽江市疾控中心发布重要提醒</span>
                <span class="news-time">2020/12/09 19:01</span>
            </div>
        </li>
    </ul>
</div>
<!--丽江概况-->
<div class="map-box flex-col flex-align-center">
    <ul class="guide-title flex-col flex-align-center">
        <li class="guide-title-en">LOCATION</li>
        <li class="guide-title-zh">丽江概况</li>
    </ul>
    <div class="map-desc">
        <span class="map-desc-span">
            <span class="map-desc-bold">
            丽江最著名的要数丽江古城（大研古镇），与其他古城不一样的是没有围墙，水是古城的灵魂，小桥流水衬着青瓦白墙，显得无比雅致；离古城较近的景点有拉市海、束河古镇、玉龙雪山等，
            古城东北部则是宝山石头城，东面是泸沽湖，西面有老君山、石鼓镇等；</span>
                由石鼓镇往北可进入虎跳峡，虎跳峡再往北就进入了香格里拉。在丽江古城喝茶晒太阳，到老君山、虎跳峡徒步，
            逛逛抬头可见玉龙雪山的忠义市场和洛克心中最美的雪嵩村，都是很棒的体验。
            <span class="map-desc-bold">丽江古城位于中国西南部云南省的丽江市，丽江古城又名大研镇，坐落在丽江坝中部，与同为第二批国家历史
            文化名城的四川阆中、山西平遥、安徽歙县并称为“保存最为完好的四大古城”大研古城是一座没有城墙的古城，光滑洁净的青石板路、完全手工建造的土木结构的房屋、无处不在的小桥流水。</span>
            大研古城是一座具有浓烈人文气息的小城，明亮的阳光下，总会有步履缓慢的上了年纪的纳西老人悠闲地踱步，他们身着藏满历史的靛蓝色衣服，头戴红军时期的八角帽，对眼前身后猎奇的目
            光视而不见、不屑一顾。<span
                class="map-desc-bold">丽江古城内的街道依山傍水修建，铺的大多都是红色角砾岩，雨季不会泥泞、旱季也不会飞灰，石上花纹图案自然雅致，与整个古城环境相得益彰。</span>位于古城中心的四
            街是丽江古城的中心，位于古城与新城交界处的大水车是丽江古城的标志，古城大水车旁有一块大屏幕，每日播放的歌曲即是古城最受欢迎最有特色的歌曲，其中《纳西净地》是较为出名的歌曲之一。
        </span>
    </div>
    <img src="./assets/images/ljmap.jpg" alt="map"/>
</div>
<!--底部-->
<div class="footer-box flex-row flex-justify-between">
    <div class="footer-referral flex-col">
        <span class="referral-item-1">@2019-2020 大美丽江旅游网</span>
        <span class="referral-item-1">联系电话:0871-68686888</span>
        <span class="referral-item-1">联系人:刘娅妮、李培美、蒋雅婷</span>
        <span class="referral-item-1">地址:云南财经大学中华职业学院 计专19-2班</span>
        <span class="referral-item-1">版权说明:Web前端设计课程期末考察项目，图片源自网络,如有侵权联系删除！</span>
    </div>
    <div class="footer-logo flex-col flex-align-center">
        <img src="assets/images/logo.png" alt="logo">
        <span class="footer-logo-text">@2019-2020 大美丽江旅游网</span>
    </div>
    <div class="footer-qrcode flex-col flex-align-center">
        <img src="./assets/images/ljqrcode.png" alt="code">
        <span>关注微信公众号</span>
    </div>
</div>
<script>
  $('.slider-item').slider({
    imgList: [
      {
        img: './assets/images/banner1.png',
        a: '#',
      },
      {
        img: './assets/images/banner2.png',
        a: '#',
      },
      {
        img: './assets/images/banner3.png',
        a: '#',
      },
      {
        img: './assets/images/banner4.png',
        a: '#',
      }
    ], //图片的列表
    width: '100%', //图片的宽
    height: 689, //图片的高
    isAuto: true, //是否自动轮播
    moveTime: 5000, //运动时间
    direction: 'right', //轮播的方向
    btnWidth: 30, //按钮的宽
    btnHeight: 60, //按钮的高
    spanWidth: 0, //span按钮的宽
    spanHeight: 0, //span按钮的高
    spanColor: '#fff', //span按钮的颜色
    activeSpanColor: 'blue', //选中的span颜色
    btnBackgroundColor: 'rgba(0, 0, 0, 0.3)', //两侧按钮的颜色
    spanRadius: '50%', //span按钮的圆角程度
    spanMargin: 3, //span之间的距离
  })
</script>
<!--<script>-->
<!--  $(function () {-->
<!--    var w = $('img').width()-->
<!--    var h = $('img').height()-->
<!--    var w2 = w + 20-->
<!--    var h2 = h + 20-->

<!--    $('img').hover(function () {-->
<!--      $(this).stop().animate({height: h2, width: w2, left: '-10px', top: '-10px'}, 400)-->
<!--    }, function () {-->
<!--      $(this).stop().animate({height: h, width: w, left: '0px', top: '0px'}, 400)-->
<!--    })-->
<!--  })-->
<!--</script>-->
<script>
    /* 导航栏锚点定位 */
    $('.header-box').click(function (e) {
      var v_id = e.target.id
      console.log('v_id', v_id)
      if (v_id === 'item_1') {
        $('html, body').animate({scrollTop: $('.guide-box').offset().top}, 1000)
      } else if (v_id === 'item_2') {
        $('html, body').animate({scrollTop: $('.hot-box').offset().top}, 1000)
      } else if (v_id === 'item_3') {
        $('html, body').animate({scrollTop: $('.moods-box').offset().top}, 1000)
      } else if (v_id === 'item_4') {
        $('html, body').animate({scrollTop: $('.news-box').offset().top}, 1000)
      } else if (v_id === 'item_5') {
        $('html, body').animate({scrollTop: $('.map-box').offset().top}, 1000)
      } else {
        $('html, body').animate({scrollTop: $('.slider-box').offset().top}, 1000)
      }
    })
</script>
<script>
    /* 动态监测修改顶部tab栏颜色 */
    function _scroll () {
      var scrollTop = $(window).scrollTop()
      if (scrollTop < 100) {
        $('.header-box').css('background', 'transparent')
      } else {
        $('.header-box').css('background', '#0088D9')
      }
    }

    $(window).on('scroll', function () {
      _scroll()
    })
</script>
</body>
</html>
